<template>
	<view class="container">
		<view class="header">
			<text class="title">集福卡</text>
			<text class="subtitle">剩余抽卡次数：{{chances}}次</text>
		</view>
		
		<view class="cards-container">
			<view class="cards-grid">
				<view class="card-item" v-for="(card, index) in cards" :key="index"
					:class="{ 'flipped': card.flipped }"
					@click="flipCard(index)">
					<view class="card-inner">
						<view class="card-front">
							<image src="/static/images/games/card-back.png" mode="aspectFit" class="card-image"></image>
						</view>
						<view class="card-back">
							<image :src="card.icon" mode="aspectFit" class="card-image"></image>
							<text class="card-name">{{card.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="progress">
			<text class="progress-title">收集进度</text>
			<view class="progress-bar">
				<view class="progress-inner" :style="{ width: `${(collectedCards.length / totalCards) * 100}%` }"></view>
			</view>
			<text class="progress-text">{{collectedCards.length}}/{{totalCards}}</text>
		</view>
		
		<view class="collected-cards">
			<text class="cards-title">已收集卡片</text>
			<view class="cards-list">
				<view class="collected-card" v-for="(card, index) in collectedCards" :key="index">
					<image :src="card.icon" mode="aspectFit" class="card-icon"></image>
					<text class="card-name">{{card.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="rules">
			<text class="rules-title">活动规则</text>
			<view class="rules-content">
				<text>1. 每人每天有3次抽卡机会</text>
				<text>2. 集齐所有卡片可获得大奖</text>
				<text>3. 重复卡片可以送给好友</text>
				<text>4. 活动结束后统一发放奖励</text>
			</view>
		</view>
		
		<view class="my-prizes" v-if="myPrizes.length > 0">
			<text class="prizes-title">我的奖品</text>
			<view class="prizes-list">
				<view class="prize-item" v-for="(prize, index) in myPrizes" :key="index">
					<image :src="prize.icon" mode="aspectFit" class="prize-icon"></image>
					<view class="prize-info">
						<text class="prize-name">{{prize.name}}</text>
						<text class="prize-value">{{prize.value}}</text>
					</view>
					<text class="prize-status" :class="prize.status">{{prize.statusText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 卡片配置
const cards = ref([
	{ name: '福', icon: '/static/images/games/card-fu.png', flipped: false },
	{ name: '禄', icon: '/static/images/games/card-lu.png', flipped: false },
	{ name: '寿', icon: '/static/images/games/card-shou.png', flipped: false },
	{ name: '喜', icon: '/static/images/games/card-xi.png', flipped: false },
	{ name: '财', icon: '/static/images/games/card-cai.png', flipped: false },
	{ name: '安', icon: '/static/images/games/card-an.png', flipped: false },
	{ name: '康', icon: '/static/images/games/card-kang.png', flipped: false },
	{ name: '乐', icon: '/static/images/games/card-le.png', flipped: false },
	{ name: '吉', icon: '/static/images/games/card-ji.png', flipped: false }
])

// 我的奖品
const myPrizes = ref([
	{
		name: '集齐福卡奖励',
		value: '100元',
		icon: '/static/images/games/prize-100.png',
		status: 'pending',
		statusText: '待领取'
	}
])

// 游戏相关
const chances = ref(3)
const totalCards = computed(() => cards.value.length)
const collectedCards = computed(() => cards.value.filter(card => card.flipped))

// 翻卡
const flipCard = (index) => {
	if (chances.value <= 0 || cards.value[index].flipped) return
	
	chances.value--
	cards.value[index].flipped = true
	
	// 检查是否集齐所有卡片
	if (collectedCards.value.length === totalCards.value) {
		uni.showModal({
			title: '恭喜集齐',
			content: '您已集齐所有福卡，获得100元大奖！',
			showCancel: false
		})
	}
}

// 页面加载时获取数据
onMounted(() => {
	// TODO: 从服务器获取抽卡次数和已收集的卡片
})
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #F5F5F5;
	min-height: 100vh;
}

.header {
	padding: 40rpx 20rpx;
	text-align: center;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 24rpx;
	color: #666;
}

.cards-container {
	padding: 40rpx 20rpx;
}

.cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.card-item {
	width: 200rpx;
	height: 200rpx;
	margin: 0 auto;
	perspective: 1000rpx;
}

.card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.card-item.flipped .card-inner {
	transform: rotateY(180deg);
}

.card-front, .card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.card-back {
	transform: rotateY(180deg);
}

.card-image {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 10rpx;
}

.card-name {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.progress {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.progress-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.progress-bar {
	height: 20rpx;
	background-color: #F5F5F5;
	border-radius: 10rpx;
	overflow: hidden;
	margin-bottom: 10rpx;
}

.progress-inner {
	height: 100%;
	background-color: #D02B29;
	transition: width 0.3s;
}

.progress-text {
	font-size: 24rpx;
	color: #666;
}

.collected-cards {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.cards-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.cards-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.collected-card {
	width: 160rpx;
	height: 160rpx;
	background-color: #F8F8F8;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.card-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.rules {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.rules-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.rules-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.8;
}

.rules-content text {
	display: block;
}

.my-prizes {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.prizes-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.prize-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.prize-item:last-child {
	border-bottom: none;
}

.prize-icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 20rpx;
}

.prize-info {
	flex: 1;
}

.prize-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 4rpx;
	display: block;
}

.prize-value {
	font-size: 24rpx;
	color: #D02B29;
}

.prize-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.prize-status.pending {
	color: #D02B29;
	background-color: #FFE4E4;
}

.prize-status.received {
	color: #999;
	background-color: #F5F5F5;
}
</style> 